// pages/vidoe/vidoe.js
import request from '../../utils/request'
Page({
  async getVideoLabel(){
    try {
      const res = await request({url:'/video/group/list'})
      let labelId = res.data[0].id
      this.setData({
        videoLabelList:res.data.splice(0,20),// 标签列表
        labelId,// 保存默认第一个高亮
      })
    } catch (error) {
      return error 
    }
  },
  // 点击那个标签那个就高亮
  chooseLabel(e){
    // console.log(e);
    this.setData({
      labelId:e.target.dataset.id,
    })
    // 获取高亮对应的视频
    this.getVideoList()
  },
  // 获取我们对应的标签id获取对应的视频
  async getVideoList(){
    let {labelId:id} = this.data
    const res = await request({url:'/video/group',data:{id}})
    // console.log(res);
    if(res.code === 200){
      this.setData({
        // 获取到里面的每一项的data因为只有里面的data才会有我们需要的数据
        videoList:res.datas.map(item=>item.data)
      })
    }
},
  // 点击了视频触发的回调  首次点击或非首次点击
  PlayVideo(e){
    // 将我们获取的id传给我们的数据
    const videoId = e.target.id
    this.setData({
      videoId,
    })
    // 判断是否首次点击
    // 首次点击的操作
    // 判断是否创建过我们的视频上下文对象
    if(!this.currentVideo){//  没有视频上下文对象说明是首次点击此视频
      // 1.给这个视频创建我们的上下文对象    我们需要传入一个vid  我点击的时候传递了vid，并且保存到了this.data.videoId,我们直接使用就好了
      this.currentVideo = wx.createVideoContext(this.data.videoId);
      // 2.因为是首次点击，我们让视频进行播放 使用上下文对象返回的方法play()可以让视频进行播放
      this.currentVideo.play();
      // 3.保存一份我们的vid 这是为了后面去对比播放的状态的，我们不需要使用他，所以把他放在this中就可以了，不需要放在data中
      this.vid = this.data.videoId;
      // 保存我们的播放状态  true是播放  false是暂停
      this.isPlay = true;
    }else{ // 非首次点击的操作
      // 1. 非首次的时候去判断是不是同一个视频 是同一个的话就把他的播放状态改变  如果是另外一个视频，我们让他重新创建并覆盖掉之前的那个上下文对象
      // 如果是同一个该做的事
      if(this.vid === this.data.videoId){
        if(this.isPlay){// 播放状态
          this.currentVideo.pause();// 暂停播放
          this.isPlay = false;// 更新状态
        }else{// 暂停状态
          this.currentVideo.play(); // 继续播放
          this.isPlay = true;// 更新状态
        }
      }else{// 不是同一个视频
        // 1.先把上一个视频暂停
        this.currentVideo.pause();
        // 1.给这个视频创建我们的上下文对象    我们需要传入一个vid  我点击的时候传递了vid，并且保存到了this.data.videoId,我们直接使用就好了
        this.currentVideo = wx.createVideoContext(this.data.videoId);

        //  判断这个id是不是跟我们的缓存列表相同
        const current  =  this.data.cacheList.find(item=>item.vid === this.data.videoId)
        // 如果真的相等说明当前的视频有过缓存，那么我们使用我们保存过的那个时长继续播放
        current&&this.currentVideo.seek(current.currentTime);// current有值才会为true  false是这一条代码都不会执行

        // 2.因为是首次点击，我们让视频进行播放 使用上下文对象返回的方法play()可以让视频进行播放
        this.currentVideo.play();
        // 3.保存一份我们的vid 这是为了后面去对比播放的状态的，我们不需要使用他，所以把他放在this中就可以了，不需要放在data中
        this.vid = this.data.videoId;
        // 保存我们的播放状态  true是播放  false是暂停
        this.isPlay = true;
      }
    }
  },
  // 点击了图片，然后我们调用我们的视频播放函数
  toVideo(e){
    // 传递我们的事件对象过去，因为我们的图片也添加了id，他们的vid都是一样的所以直接传递整个事件对象过去就可以了
    this.PlayVideo(e)
  },
  // 保存当前视频的缓存，以供下次点击回来的时候继续播放
  SaveCache(e){ 
    // console.log(e);
    let cacheList = this.data.cacheList;
    // 查找当前的视频是否已经缓存过了
    let cacheData = cacheList.find(item=>e.target.id === item.vid)
    // console.log(cacheData);
    if(cacheData){// 缓存过这个视频
      cacheData.currentTime = e.detail.currentTime;// 更新这个时长
    }else{// 没有缓存过
      // 没有缓存过的话，我们需要将这个视频的vid和时长传递给他
      cacheData = {
        vid:this.data.videoId,
        currentTime: e.detail.currentTime,
      }
      // 保存过之后，push到缓存列表中，但是push并不是setData做的，我们先自己做，push完了就将最新的时长返回给我们的真实缓存列表
      cacheList.push(cacheData)
    }
    this.setData({
      cacheData,
    })
  },
  // 当前播放的视频已经结束触发的回调函数
  videoEnd(e){
    // 去过滤vid相等的那个数据
    let cacheList = this.data.cacheList.filter(item=>item.vid !== this.data.videoId)
    this.setData({
      cacheList
    })
  },
  // 用户往下刷新了触发的回调函数
  renovateRefresherrefresh(){
    // 我们需要将剩下状态停止，并且使用当前标签id发送请求
    // 使用异步的定时器，这样可以让刷新的状态停留，不然的话会立刻恢复原位
    setTimeout(()=>{
      this.setData({
        isRenovate:false,
      })
      this.getVideoList()
    },1000)
  },
  // 拉倒底部的时候
  bottomPage(){
    // 拉倒底部我们没有了新的数据，因为只有这么多，在用户拉到底部的时候，我们进行提示
    setTimeout(()=>{
      wx.showToast({
        title: '暂时没有更多内容',
        icon:'error',
      })
    },200)
  },
  /**
   * 页面的初始数据
   */
  data: {
    videoLabelList:[],//接收头部标签列表
    labelId:0,// 获取我们的标签id
    videoList:[],//保存视频列表
    videoId:0,// 用来保存我们的当前视频id
    cacheList:[],// 这是用来缓存视频时长的数组
    isRenovate:true,// 保存下拉刷新的状态
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    await this.getVideoLabel()
    // 因为我们的视频是根据我们的标签id进行获取的，我们需使用await等待id的返回再去请求视频列表
    await this.getVideoList()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage({from}) {
    if(from === 'button'){
      return {
        title:'这个视频太棒了',
        path:'/pages/vidoe/vidoe'
      }
    }else{
      return {
        title:'这个小程序太棒了',                                                                                
        path:'/pages/home/home'
      }
    }
  }
})